<template>
<div>
    <div>
      <span class="left_bar_title">开发文档</span>
    </div>
    <div class="left_bar_item" v-for="(item, index) in menudata" :key="index">
      <p class="left_bar_item_title">{{ item.name }}</p>
      <div class='left_bar_item_box' v-for="(items, indexs) in item.children" :key="indexs">
        <div v-if="menuid == true" class="left_bar_item_details_select" >
          <div class='left_mark'></div>
          <span>{{ items.name }}</span>
        </div>
        <div v-else class="left_bar_item_details">
          <span>{{ items.name }}</span>
        </div>
      </div>
    </div>
  </div>


</template>
<script lang="ts">
export default {
  name: 'leftmenu',

}
</script>
<script lang="ts" setup>
import { ref } from "vue"
import http from "webosutils/lib/http";
import { LayBody, LayLayout, LayScroll, LaySide } from '@layui/layui-vue';
const openKeys4 = ref([""]) as any;
const selectedKey = ref("") as any;
const menudata = ref([]) as any;
const type = ref("") as any;
interface IleftmenuProps {
  menuid: any, type: String
}
const props = withDefaults(defineProps<IleftmenuProps>(), {
  menuid: Object, type: String
});
type.value = props.type;
const init = () => {
  http.post("/v1/api/portalsite/GetByCode", { code: props.menuid }).then((res) => {
    if (res.success) {
      menudata.value = res.data;
    }
  }).catch(res => {

  });
  //vuewebosdoc
}
init();
</script>
<style>
.left_bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
}

.left_bar_item {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding-left: 56px;
}

.left_bar_title {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  margin-bottom: 40px;
  padding-left: 56px;
  display: block;
}

.left_bar_item_title {
  font-size: 18px;
  color: #3f3f3f;
  font-weight: bold;

}

.left_bar_item_details {
  cursor: pointer;
  display: inline;
  font-size: 16px;
  color: #878787;
  line-height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.left_bar_item_details_select {
  cursor: pointer;
  display: inline;
  font-size: 16px;
  color: #69BCE4;
  line-height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.left_mark {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: #69BCE4;
  margin-right: 8px;
}
</style>
